<template>
	<view style="background: #F1F5FF;height: 100%;">
		
		<myHeadTab>活动详情</myHeadTab>
		
		<view style="height: 32rpx;"></view>
		<uni-row style="height: 46rpx;">
			<uni-col :span="1" :offset="1">
				<image style="width: 36rpx;height: 36rpx;position: relative;top: 6rpx;" src="../../../static/名称.png"></image>
			</uni-col>
			
			<uni-col :span="20">
				<text class="f3" style="position: relative;left: 12rpx;">{{activity?.title}}</text>
			</uni-col>
			
			<uni-col :span="1" >
				<image style="height: 32rpx;width: 32rpx;position: relative;top: 6rpx;" src="../../../static/分享.png"></image>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">审批状态</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text :class="[applicationStatus == 'run'?'run': applicationStatus == 'accept'?'yes':'no' ]" style="position: relative;left: 16rpx;" >{{applicationStatus == 'run'?'申请中；等待意见': applicationStatus == 'accept'?'审核通过；同意加入':'审核不通过；不同意加入'}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动来源</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 60rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">派发</text>
					</view>
				</view>
			</uni-col>
		</uni-row>

		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 244rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动时间</text>
					</view>
					<view style="height: 4rpx;width: 100%;"></view>
					
					<view style="width: 384rpx;height: 168rpx;">
						
						<view>
							<text class="f6">计划开始日期：{{activity?.beiginDate}}</text>
						</view>
						
						<view>
							<text class="f6">计划结束日期：{{activity?.endDate}}</text>
						</view>
						
						<view>
							<text class="f6">合计时长：{{calculateDuration(activity?.beiginDate,activity?.endDate)}}天</text>
						</view>
		
		
						
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动区域</text>
					</view>
					
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 300rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">{{splitLocation(activity?.area)}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动牵头宣传组</text>
					</view>
					
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 200rpx;">
						<text class="f5" style="position: relative;left: 16rpx;">{{activity?.group}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		<view style="height: 24rpx;"></view>
		
		<uni-row style="background: #F1F5FF;" v-if="activity.activityType == '母校行活动'">
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 352rpx;padding-top: 24rpx;padding-left: 24rpx;padding-right: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">报名申请</text>
					</view>
					
					<view style="height: 4rpx;width: 100%;"></view>
					
					<view style="width: 384rpx;height: 168rpx;">
						
						<view>
							<text class="f6">姓名：{{user.name}}</text>
						</view>
						
						<view>
							<text class="f6">学号/工号：{{user.stuNumber}}</text>
						</view>
						
						<view>
							<text class="f6">学院：{{user.academy}}</text>
						</view>
						
						<view>
							<text class="f6">QQ：{{user.qq}}</text>
						</view>
						
						<view>
							<text class="f6">微信：{{user.wx}}</text>
						</view>
					</view>
					
					<view style="height: 20rpx;width: 100%;"></view>
					
					
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;" v-if="activity.activityType == '母校行活动'"></view>
		
		<uni-row v-if="activity.activityType == '母校行活动'" >
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">是否愿意担任团队负责人</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f10" style="position: relative;left: 16rpx;">{{user.isAcceptCharge?'愿意':'不愿意'}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;" v-if="activity.activityType == '母校行活动'"></view>
		
		<uni-row v-if="activity.activityType == '母校行活动'">
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 124rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">大学以来担任学生干部经历</text>
					</view>
					<view style="height: 12rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f10" style="position: relative;left: 16rpx;">{{user.workExperience}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;" v-if="activity.activityType == '母校行活动'"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1" >
				<view class="card" style="height: auto;padding-top: 24rpx;padding-left: 24rpx;padding-bottom: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">审批流程</text>
					</view>
					
					<view style="height: 30rpx;width: 100%;"></view>
					
					<view style="width: 100%;">
						
						<template v-for="(item,index) in timeLine">
							<timelineItem :end="index == timeLine?.length - 1" :image="item?.img" :avatar="item.avatar">
								<view>
									<view class="f11">{{item?.title}}</view>
									<view style="height: 20rpx;width: 100%;"></view>
									<view class="f12">{{item?.content}}</view>
									<view class="f13">{{item?.time}}</view>
								</view>
							</timelineItem>	
						</template>
						
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 32rpx;"></view>
		
		<button class="btn"><view class="btn-font">撤销申请</view></button>
		
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script setup>
import myHeadTab from '../../../component/myHeadTab/index.vue'
import timeline from '../../../components/chenbin-timeline/timeLine.vue'
import timelineItem from '../../../components/chenbin-timeline/timelineItem.vue'
import {onMounted, ref} from 'vue'

	const applicationStatus = ref('run')
	import { onLoad } from '@dcloudio/uni-app';
	
	
	onLoad((options) => {
		console.log('接受值:',options);
		activity.value.activityType = options.activityType;
		applicationStatus.value = options.applicationStatus;
	})
	
	
	const timeLine = ref()

	onMounted(()=>{
		timeLine.value = [
		{
			avatar: '',
			img: '../../../static/check-circle-fill.png',
			title: '发起人(招宣成员/全体教职工)',
			content: '张晓军',
			time: '2023-02-15 11:37:08',
		},
		{
			avatar: '',
			img: applicationStatus.value == 'run'?'../../../static/check-circle-fill-run.png':applicationStatus.value == 'accept'?'../../../static/check-circle-fill.png':'../../../static/check-circle-fill-fail.png',
			title: '审批人(活动组长)',
			content: '张晓军',
			time: '2023-02-15 11:37:08',
		}
	]
	})
	

	const user = ref({
		name: '姓名1',
		stuNumber: '10001',
		academy: 'A学院',
		qq:'10000',
		wx: '10000',
		isAcceptCharge: true,
		workExperience:'班长',
	})

	const activity = ref(	
	{
		activityId: 2,
		title: '2012届毕业生母校游',
		school: '武汉第一中学',
		activityType: '母校行活动',
		beiginDate: '2024/03/29',
		endDate: '2024/03/29',
		area: '湖北省武汉市洪山区',
		creatorName: '李明慧',
		creatorAvatar: '11',
		activityOrigin: '派发',
		activityAnnual: '2023年',
		group: '招生宣传组',
		memberNum: 28,
		memberIds: [1,2,3,4,5],
		avatarList: ['1','2','3','4','5'],
		status: true,
		recentUpdateTime: '2023/03/29',
		recentUpdateName: '李明',
		linkName: '周彬',
		linkJob: '教导主任',
		unitName: '',
		activityTime: '',
		activitySum:{
			sumId: 1,
			name: '李明慧',
			avatar: '11',
			sumTime: '2023/3/20 00:00:00',
			sumContent: '学校坚持认真贯彻执行全国、省、市关于职业学校招生工作精神,加强招生管理,规范招生行为。'
		},
		activityVideo:{
			name: '李明慧',
			videoTime: '2023/3/20 00:00:00',
			file: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
		}
	})
	

	
	const memberList = ref([
		{
		name: '姓名1',
		unit: 'A学院',
		job: '主任',
		jobName: '教授',
		school: '武汉一中',
		origin: '湖北省',
		phone: '15888888888',
		jobNumber: '10003',
	},
	{
		name: '姓名1',
		unit: 'A学院',
		job: '主任',
		jobName: '教授',
		school: '武汉一中',
		origin: '湖北省',
		phone: '15888888888',
		jobNumber: '10003',
	},
	])
	
	function calculateDuration(startDate,endDate){
	  if (startDate && endDate) {  
	    const start = new Date(startDate);  
	    const end = new Date(endDate);  
	    const diffTime = Math.abs(end - start);  
	    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 转换为天数  
	  } else {  
	    return null;  
	    alert('请输入有效的日期');  
	  }  
	}
	
	const splitLocation = (location) => {
	   if (location) {  
	     // 使用正则表达式和 ng-replace 分割  
	     return location.replace(/(.{2,3}省|.{2,3}市|.{2,3}区)/g, '$1/').slice(0, -1);  
	   } else {  
	     return '';  
	     alert('请输入有效的省市区');  
	   }  
	 }; 

</script>

<style>
.card{
	background: #FFFFFF;
	border-radius: 16rpx;
}

.btn{
width: 686rpx;
height: 80rpx;
background: #276EFF;
border-radius: 16rpx;
	
}

.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
	text-align: center;
}

.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f3{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 46rpx;
}
.f4{
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24rpx;
color: #5D5C5C;
letter-spacing: 0;
line-height: 40rpx;	
}

.f5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f7{
	 color: #5d5c5c;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 72rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.f8{
	font-family: PingFangSC-Regular;font-weight: 400;font-size: 24rpx;color: #A9ACB4;letter-spacing: 0;
}
.f9{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 12px;
	color: #000000;
	letter-spacing: 0;
}
.i1{
	background: #F4F4F4;
	border-radius: 8rpx;
}
.i2{
	background: #F1F5FF;
	border: 2rpx solid #E7EDFB;
	border-radius: 8rpx;
}
.run{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 40rpx;
}
.yes{
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 30rpx;
color: #00A452;
letter-spacing: 0;
line-height: 40rpx;
}
.no{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #D10000;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f10{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f11{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.f12{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 28rpx;
	color: #595959;
}
.f13{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #989797;
}
.btn-font{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 80rpx;
}
</style>
